<template>
  <div>
    <button @click="divVisible = !divVisible">切换可见性</button>
    <transition name="fade">
      <div v-if="divVisible">本段内容时而隐藏时而可见</div>
    </transition>
    <transition>
      <div @mousemove="xCoordinate" 
      :style="{ backgroundColor:`hsl(${x},80%,50%)` }"
      class="movearea"
      >
        <h3>Move your mouse across the screen...</h3>
        <p>x : {{ x }}</p>
      </div>
    </transition>
    <hr>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const divVisible = ref(true)
const x = ref(0)
const xCoordinate = (e) => {
  x.value = e.clientX
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to{
  opacity: 0;
}
.movearea{
  transition: .2s background-color ease;
}
</style>